define('editorenhancer/myalbum/MyAlbum', [
    'editorenhancer/myalbum/myalbum.css',
    'utils/fetchEnhancer',
    'utils/Time',
    'components/Page/Page'], function(css, fetch, Time, Page) {

const XEditor = window.XEditor;
const Dialog = XEditor.Dialog;

class MyAlbum extends XEditor.IWidget {
    constructor(button, editor) {
        super(editor);

        this.button = button;
        this.editor = editor;

        this.dialogRef = null;
        this.page = null;
        this.selected = '';
    }

    statusReflect() {}

    getHtml() {
        const html =
            ['<div class="xeditor-uploadimage-wrapper">',
                '<div class="myalbum-wrapper"></div>',
                '<div class="myalbum-pagewrapper"></div>',
            '</div>'].join('');

        return html;
    }

    getImageWrapper() {
        return this.dialogRef.getContentDom().querySelector('.myalbum-wrapper');
    }
    getPageWrapper() {
        return this.dialogRef.getContentDom().querySelector('.myalbum-pagewrapper');
    }

    renderList(res) {
        let _self = this;
        let list = res.data.data;
        let html = '';

        for(let i=0, len=list.length; i<len; i++) {
            html +=
                '<div class="myalbum-item" data-img="'+ list[i].uri +'" style="background-image: url('+ list[i].uri +')">'
                    + '<div class="myalbum-item-mask"><span>'+ Time.format('y-m-d', list[i].post_time * 1000) +'</span></div>'
                + '</div>';
        }

        this.getImageWrapper().innerHTML = html;

        this.page = new Page(res.data.total, res.data.page_size);
        this.page.currentPage = parseInt(res.data.current, 10);
        this.page.setConfig('linkItemNumber', 3);
        this.page.setConfig('showPrevious', false);
        this.page.setConfig('showNext', false);
        this.page.onChange = (currentPage, e) => {
            _self.fetchList(currentPage);
        };
        this.page.render(this.getPageWrapper());
    }

    fetchList(page) {
        fetch('/api/files/list?page=' + page).then((res) => {
            if(0 === res.status) {
                this.renderList(res);
            } else {
                this.getImageWrapper().innerHTML = '<div style="padding: 20px;">没有上传过图片</div>';
            }
        });
    }

    initEvent() {
        let _self = this;
        let wrapper = this.getImageWrapper();

        wrapper.onclick = (e) => {
            let t = e.target;
            if(t.className !== 'myalbum-item-mask') {
                return;
            }

            t = t.parentNode;
            _self.selected = t.getAttribute('data-img');

            let allItems = wrapper.querySelectorAll('.myalbum-item');
            for(let i=0, len=allItems.length; i<len; i++) {
                allItems[i].className = 'myalbum-item';
            }
            t.className += ' active';
        };

        this.dialogRef.onOk = () => {
            if('' !== _self.selected) {
                XEditor.Editable.insertHtml(1, '<img src="'+ _self.selected +'" />');
            }

            _self.selected = '';
            _self.dialogRef.close();
        };
    }

    onClick() {
        this.dialogRef = Dialog.getInstance().open(this.getHtml(), '我的图片');

        this.fetchList(1);
        this.initEvent();
    }
}

return MyAlbum;
});
